import { View, CoverView, CoverImage } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useStore } from "react-redux";
import "./index.scss";

function CustomTabBar() {
  //   const url = "../assets/images/tabbar/home.png";
  const store = useStore();
  const state = store.getState()
  const safeHeight: number = state.safeArea.safeHeight;
  const tabbarIcons = {
    home: require("../assets/images/tabbar/home.png"),
    homeActive: require("../assets/images/tabbar/home_active.png"),
    my: require("../assets/images/tabbar/my.png"),
    myActive: require("../assets/images/tabbar/my_active.png"),
    centerIcon:require("../assets/images/tabbar/xian.png")
  };
  const tabbarBg = require("../assets/images/tabbar/tabbar_bg.png");
  console.log(Taro);
  return (
    <CoverView>
      <CoverView className="bottom-tab">
        <CoverImage className="bottom-tab--bg" src={tabbarBg}></CoverImage>
        <CoverView className="bottom-tab__item">
          <CoverImage
            src={tabbarIcons.home}
            className="bottom-tab__item--icon"
          ></CoverImage>
          <CoverView className="bottom-tab__item--text">主页</CoverView>
        </CoverView>
        <CoverView className="content__center">
          <CoverView className="content__center__block">
            <CoverImage className="content__center__block--icon" src={tabbarIcons.centerIcon}></CoverImage>
          </CoverView>
        </CoverView>
        <CoverView className="bottom-tab__item">
          <CoverImage
            src={tabbarIcons.my}
            className="bottom-tab__item--icon"
          ></CoverImage>
          <CoverView className="bottom-tab__item--text">我的</CoverView>
        </CoverView>
      </CoverView>
      {/* 安全区 */}
      <CoverView
        className="bottom-safe"
        style={`height:` + safeHeight + "px"}
      ></CoverView>
    </CoverView>
  );
}

export default CustomTabBar;
